<template>
	<view>
		<view class="formbox">
			<view class="formbox-item1">
				<view class="title">工种</view>
				<view class="value">

					<view class="uni-input">{{typeName}}</view>

				</view>
			</view>
			
			<view class="formbox-item1">
				<view class="title">钟数</view>
				<view class="value">
					<input  type="digit" @input="updateInput" v-model="clock" placeholder-class="placeholderClass" placeholder="请填写钟数" />
				</view>
			</view>
			
			<view class="formbox-item1">
				<view class="title">返佣金额</view>
				<view class="value">
					<input type="digit"   v-model="amount" disabled="true" placeholder-class="placeholderClass"
						placeholder="请输入返佣金额" />
				</view>
			</view>
			<view class="formbox-item1">
				<view class="title">结束时间</view>
				<view class="value">

					<biaofun-datetime-picker placeholder="请选择活动时间" defaultValue="2021-06-29 10:30"
						start="2021-06-29 02:08" end="2100-10-28 22:58" fields="minute" @change="changeDatetimePicker">
					</biaofun-datetime-picker>
					<image class="right" src="../../static/usercenter/icon_zk.png"></image>
				</view>
			</view>
		</view>
		<view class="fiexd-btn">
			<button @click="submit">提交</button>
		</view>
	</view>
</template>

<script>
	import biaofunDatetimePicker from '@/components/biaofun-datetime-picker/biaofun-datetime-picker.vue';
	export default {
		components: {
			biaofunDatetimePicker
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				defaultValue: '2020-06-08 10:30',
				array1: ['工种1', '工种2', '工种3', '工种4'],
				index: 0,
				date: "请选择时间",
				typeNameList: [],
				typeList: [],
				typeName: '请选择工种',
				workId: '',
				amount: 0,
				clock: '',
				targetAmount:0,
				type:{}
			}
		},

		computed: {

			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onShow() {

		},

		onLoad() {
			this.myInfo();
			//this.myWorkList();
		},
		methods: {

			updateInput(e){
				var value = e.target.value;
				this.amount = value*this.targetAmount*0.3;
			},
			changeDatetimePicker(date) {
				this.date = date;
				console.log('选择的日期时间数据：', date.f3);

			},

			myInfo() {
				let param = {};
				this.$api.getWorkType(param).then(res => {
					console.info("==getWorkType===" + JSON.stringify(res));
					if (res.code == 1) {
						this.type = res.data;
						this.typeName = res.data.workname;
						this.targetAmount = res.data.backmoney;
						this.workId = res.data.id;
					} else {
						uni.showModal({
							title: '提示',
							content: '请联系客服,岗位分类',
							showCancel: false,
							confirmText: '知道了',
							success(res) {
								if (res.confirm) {
									uni.navigateBack({
										delta:1
									})
								}
							}
						})
					}
				})

			},

			submit() {

				if (this.workId == '') {
					this.$util.$showToast("请选择工种", '', 'none');
					return;
				}
				if (this.clock == '') {
					this.$util.$showToast("请输入时长", '', 'none');
					return;
				}


				let param = {
					workId: this.workId,
					clock: this.clock,
					endTime: '2021-6-28 12:00:00'
				};
				let that = this;

				this.$api.recordWork(param).then(res => {

					if (res.code == 1) {
						that.$util.$showToast('发布成功', '', 'none');
						uni.navigateBack({
							delta: 1
						})
					} else {
						that.$util.$showToast(res.msg, '', 'none');
					}

					console.info(res)
				})
			},

			bindPickerType(e) {
				var index = e.target.value
				this.workId = this.typeList[index].id;
				this.typeName = this.typeList[index].workname;
				this.amount = this.typeList[index].backmoney;
				console.info("===workId===" + this.workId);
			},
			myWorkList() {

				let param = {};
				let that = this;
				let typeNameList = [];
				this.$api.worktype(param).then(res => {

					if (res.code == 1) {
						that.typeList = res.data;
						for (var i = 0; i < res.data.length; i++) {
							typeNameList.push(res.data[i].workname)
						}
					}

					console.info(res)
				})
				this.typeNameList = typeNameList;
			},

			bindDateChange: function(e) {
				this.date = e.target.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style lang="scss">
	.formbox {
		padding-bottom: 140rpx;

		.formbox-item1 {
			margin: 0 40rpx;
			padding: 35rpx 0;
			border-bottom: 1rpx solid #e0e0e0;

			.title {
				font-size: 28rpx;
				color: #333333;
				margin-bottom: 54rpx;
			}

			.value {
				display: flex;

				picker {
					font-size: 28rpx;
					color: #BFBFBF;
					flex: auto;
				}
				input{
					width: 100%;
				}

				biaofun-datetime-picker {
					font-size: 28rpx;
					color: #BFBFBF;
					flex: auto;
					text-align: left;
				}

				.right {
					width: 36rpx;
					height: 36rpx;
				}
			}

		}
	}
</style>
